<template>
    <div class="head">
        <img @click="change_head()" class="head_img" :src="'/static/user/img/head/' + this.head_url" alt="用户头像"/>
        <div class="head_text">
            <span class="head_name">{{ this.username }}</span>
            <span class="head_a">{{ this.level }}</span>
        </div>
<!--        @click="go('/user/space')"-->
        <div @click="tips()" class="head_space">
            <span style="color: #585858;padding-bottom: 1px">空间</span>
            <el-icon :size="20" :color="'#585858'">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg>
            </el-icon>
        </div>
    </div>
    <el-divider />
    <div class="app">
        <IconItem></IconItem>
        <AdminIconItem v-if="this.is_admin" :is_root="this.is_root"></AdminIconItem>
    </div>
</template>

<script>
    import IconItem from "./utils/IconItem.vue";
    import {ElLoading, ElMessage} from "element-plus";
    import axios from "axios";
    import AdminIconItem from "./utils/AdminIconItem.vue";

    export default {
        name: "Home",
        components: {
            IconItem,
            AdminIconItem
        },
        data(){
            return {
                username: '',
                level: '',
                head_url: 'lumine.jpg',
                is_admin: false,
                is_root: false,
            }
        },
        methods: {
            go(url){
                this.$router.push(url)
            },
            open(url){
                window.open(url)
            },
            change_head(){
                window.location.href = '/user/head'
            },
            tips(){
                ElMessage('功能暂未实现，敬请期待')
            },
        },
        mounted() {
            let _this = this;
            window.onload = function () {
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                let this_ = _this;
                axios.post('/user/api/get_user_info_api')
                    .then(function (response) {
                        let user_data = response.data
                        this_.username = user_data.uname
                        this_.head_url = user_data.head

                        let level = user_data.level
                        if (level === 0){
                            this_.level = '超级管理员'
                            this_.is_root = true
                            this_.is_admin = true
                        }
                        else if (level === 1){
                            this_.level = '管理员'
                            this_.is_admin = true
                        }
                        else if (level === 2){
                            this_.level = '正式用户'
                        }
                        else if (level === 3){
                            this_.level = '游客'
                        }
                        setTimeout(() => {
                            loading.close()
                        }, 500)
                    })
                    .catch(function (error) {
                        console.log(error);
                        ElMessage({message: "服务器异常，获取用户信息失败", type: 'error'})
                    });
                setTimeout(() => {
                    loading.close()
                }, 5000)
            }
        },
    }
</script>

<style scoped>
    @import "../assets/css/home.css";

</style>